<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 添加商品信息提示框 -->
			<el-alert
			    title="添加商品信息"
			    type="info"
			    center
			    show-icon
				:closable="false">
			  </el-alert>
			  <!-- 进度条区域 -->
			  <el-steps :active="activeIndex-0" align-center>
			    <el-step title="基本信息" ></el-step>
			    <el-step title="商品参数"></el-step>
			    <el-step title="商品属性" ></el-step>
				<el-step title="商品图片" ></el-step>
				<el-step title="商品内容"></el-step>
				<el-step title="完成" ></el-step>
			  </el-steps>
			  <!-- form表单区域 -->
		  <el-form 
			:model="addForm" 
			:rules="addFormRules" 
			ref="addFormRef" 
			label-width="100px" 
			label-position="top"
			>
			  <!-- tab栏区域 -->
			   <el-tabs 
					:tab-position="tabPosition" 
					 v-model="activeIndex" 
					 :before-leave="beforeTableave" 
					 @tab-click="tabClick">
			      <el-tab-pane label="基本信息" name="0">
					  <el-form-item label="商品名称" prop="goods_name">
					    <el-input v-model="addForm.goods_name"></el-input>
				      </el-form-item>
					  <el-form-item label="商品价格" prop="goods_price" type="number">
					    <el-input v-model="addForm.goods_price"></el-input>
					  </el-form-item>
					  <el-form-item label="商品重量" prop="goods_number" type="number">
					    <el-input v-model="addForm.goods_number"></el-input>
					  </el-form-item>
					  <el-form-item label="商品数量" prop="goods_weight" type="number">
					    <el-input v-model="addForm.goods_weight"></el-input>
					  </el-form-item>
					  <el-form-item label="商品分类" prop="goods_cate">
						<!-- 选择商品分类的级联选择框 -->
						<el-cascader
						    v-model="addForm.goods_cat"
						    :options="cateList"
						    :props="cascaderProps"
						    @change="handleChange"
							clearable
							></el-cascader>
					  </el-form-item>
				  </el-tab-pane>
			      <el-tab-pane label="商品参数" name="1">
					  <!-- 渲染表单的item项 -->
					  <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
						   <el-checkbox-group v-model="item.attr_vals">
						       <el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border></el-checkbox>
						     </el-checkbox-group>
					  </el-form-item>
				  </el-tab-pane>
			      <el-tab-pane label="商品属性" name="2">
					  <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
						   <el-input v-model="item.attr_vals"></el-input>
					  </el-form-item>
				  </el-tab-pane>
			      <el-tab-pane label="商品图片" name="3">
					  <!-- action表示图片要上传到的后台api地址 ,接口文档会给的,不要慌~~-->
					  <!-- 但是需要完整的路径 -->
					  <!-- :headers是给它能够发起请求时,配置请求头的,因为它不用axios发送请求,所以需要单独配置一下 -->
					  <el-upload
					    :action="uploadURL"
					    :on-preview="handlePreview"
					    :on-remove="handleRemove"
					    list-type="picture"
						:headers="headerObj"
						:on-success="handleSuccess"
						>
					    <el-button size="small" type="primary">点击上传</el-button>
					  </el-upload>
				  </el-tab-pane>
				  <el-tab-pane label="商品内容" name="4">
					  <!-- 富文本编辑器组件 -->
					  <quill-editor v-model="addForm.goods_introduce"></quill-editor>
					  <!-- 添加商品的按钮 -->
					  <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
				  </el-tab-pane>
			    </el-tabs>
		   </el-form>
		   
		   <!-- 图片预览的对话框 -->
		   <el-dialog
		     title="图片预览"
		     :visible.sync="dialogVisible"
		     width="40%"
		     >
				<img :src="this.previewPath" alt="" class="pic">
		   </el-dialog>
		</el-card>
	</div>
</template>

<script>
	import _ from 'lodash'
	export default{
		data(){
			return{
				activeIndex:'0',
				tabPosition: 'left',
				//添加商品的表单对象
				addForm:{
					goods_name:'',
					goods_price:0,
					goods_number:0,
					goods_weight:0,
					//商品所属的分类数组,级联选择器选中的id值
					goods_cat:[],
					//上传的图片的临时地址
					pics:[],
					//商品的介绍内容
					goods_introduce:'',
					attrs:[]
				},
				addFormRules:{
					goods_name:[{ required: true, message: '请输入商品名称', trigger: 'blur' }],
					goods_price:[{ required: true, message: '请输入商品价格', trigger: 'blur' }],
					goods_number:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
					goods_weight:[{ required: true, message: '请输入商品数量', trigger: 'blur' }],
					goods_cat:[{ required: true, message: '请选择商品分类', trigger: 'blur' }]
				},
				//获取的所有列表信息
				cateList:[],
				//指定级联选择器的配置对象
				cascaderProps:{
					expandTrigger: 'hover',
					//获取的数据中的id
					value: 'cat_id',
					//显示在页面上的每一项的内容
					label:'cat_name',
					//下一层级
					children:'children',
				},
				//动态参数列表
				manyTableData:[],
				onlyTableData:[],
				//上传图片的url地址
				uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',
				//图片上传的请求头对象
				headerObj:{
					Authorization:window.sessionStorage.getItem('token')
				},
				previewPath:'',
				dialogVisible:false,
				
			}
		},
		created(){
			this.getCateList()
		},
		methods:{
			//获取所有的分类的数据列表
			async getCateList(){
				const{data:res}=await this.$http.get('categories')
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.$message.success(res.meta.msg)
				this.cateList=res.data
			},
			//级联选择框选中之后的处理
			handleChange(){
				//保证选中三级分类
				if(this.addForm.goods_cat.length!==3){
					this.addForm.goods_cat=[]
				}
			},
			beforeTableave(activeName,oldActiveName){
				// console.log('即将离开的标签名'+oldActiveName)
				// console.log('即将进入的标签名'+activeName)
				//这个函数,一旦return false就会阻止标签页的切换
				if(oldActiveName==='0' && this.addForm.goods_cat.length!==3){
					this.$message.error("请先选择商品分类")
					return false
				}
			},
			async tabClick(){
				//当访问的是商品参数时,对应动态参数面板
				if(this.activeIndex==='1'){
					const{data:res}=await this.$http.get(`categories/${this.catId}/attributes`,{
						params:{sel:'many'}
					})
					if(res.meta.status !==200)return this.$message.error(res.meta.msg)
					//因为数据中attr_vals是一个字符串,我们需要把它转化为数组,且用空格分割
					res.data.forEach(item=>{
						item.attr_vals=item.attr_vals.length===0 ?[]:item.attr_vals.split(' ')
					})
					this.manyTableData=res.data
					// console.log(this.manyTableData)
				}else if(this.activeIndex==='2'){
					//当tab选项卡选中第三个的时候,对应的是静态数据
					//同样需要发起请求,从而获取静态数据
					const{data:res}=await this.$http.get(`categories/${this.catId}/attributes`,{
						params:{sel:'only'}
					})
					if(res.meta.status !==200)return this.$message.error(res.meta.msg)
					this.onlyTableData=res.data
					console.log(this.onlyTableData)
				}
			},
			//处理上传图片的预览功能
			handlePreview(file){
				// console.log(file)
				this.dialogVisible=true
				this.previewPath=file.response.data.url
			},
			//处理移除图片的操作
			//接收的是对应图片的信息
			handleRemove(file){
				// 把对应图片pic信息,从请求参数列表中移除就行
				// console.log(file)
				// 1.获取对应图片的pic信息
				const filePath=file.response.data.tmp_path
				// 2.根据这个pic信息去addForm参数列表中的pic数组对象中寻找其索引值
				const index =this.addForm.pics.findIndex(x=>x.pic === filePath)
				// 3.把这图像对应的索引值删除
				this.addForm.pics.splice(index,1)
			},
			//上传图片成功后,是放置在后台的临时地址上,后续添加商品操作还需要处理
			//这里监听图片上传成功的事件
			handleSuccess(response){
				// console.log(response)
				// 图片上传成功后,第一步拼接得到一个图片信息
				const picInfo={
					pic: response.data.tmp_path
				}
				// 将图片信息对象push到pics中
				this.addForm.pics.push(picInfo)
				console.log(this.addForm.pics)
			},
			//发起请求添加新的商品内容
			async add(){
				this.$refs.addFormRef.validate(valid=>{
					if(!valid)return this.$message.error("请填写必要的表单项目")
				})
				//预验证通过之后,开始发起请求
				//把这个参数变更为逗号分割的字符串
				//先使用lodash深拷贝一份
				const form=_.cloneDeep(this.addForm)
				//这样之后,form用来请求传参,this.addForm还是用来渲染级联选择器,两者没有多大关系
				form.goods_cat=form.goods_cat.join(',')
				//处理动态参数
				this.manyTableData.forEach(item=>{
					const newInfo={
						attr_id:item.attr_id,
						attr_value:item.attr_vals.join(' ')
					}
					this.addForm.attrs.push(newInfo)
				})
				//处理静态属性
				this.onlyTableData.forEach(item=>{
					const newInfo={
						attr_id:item.attr_id,
						attr_value:item.attr_vals
					}
					this.addForm.attrs.push(newInfo)
				})
				form.attrs=this.addForm.attrs
				//这样可行的请求就放到form里面了!可以用这个发起请求了
				const{data:res}=await this.$http.post('goods',form)
				if(res.meta.status!==201)return this.$message.error(res.meta.msg)
				this.$message.success(res.meta.msg)
				//然后利用编程式导航,跳转页面到商品页面
				this.$router.push('/goods')
			}
		},
		computed:{
			catId(){
				if(this.addForm.goods_cat.length===3){
				  return this.addForm.goods_cat[2]					
				}
				return null
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-checkbox{
		margin: 3px 10px!important;
	}
	.pic{
		width: 100%;
	}
	.btnAdd{
		margin-top: 15px;
	}
</style>
